import type { TableColumnCtx } from 'element-plus'

/**
 * 表格列配置
 *
 * 渲染优先级:
 * 1. 命名插槽 - 使用 <template #column-propName> 自定义内容
 * 2. 自定义组件 - 通过component指定组件
 * 3. formatter函数 - 通过formatter函数格式化内容
 * 4. 默认渲染 - 直接显示prop对应的值
 */
export interface TableColumn extends Omit<Partial<TableColumnCtx<any>>, 'formatter'> {
  /** 列属性名，对应数据中的字段名 */
  prop: string
  /** 列标题 */
  label: string
  /** 自定义组件名称 */
  component?: string
  /** 自定义组件属性 */
  componentProps?: Record<string, any>
  /** 是否使用自定义渲染 */
  customRender?: boolean
  /** 自定义插槽名称，默认为column-prop */
  slotName?: string
  /** 列是否固定，可选值: true, 'left', 'right' */
  fixed?: boolean | 'left' | 'right'
  /** 列宽度 */
  width?: number | string
  /** 最小列宽度 */
  minWidth?: number | string
  /** 列是否可排序 */
  sortable?: boolean
  /** 文本对齐方式，可选值: 'left', 'center', 'right' */
  align?: 'left' | 'center' | 'right'
  /**
   * 格式化函数，用于自定义单元格内容
   * @param row 当前行数据
   * @param prop 当前列属性名
   * @param cellValue 单元格值
   * @param index 行索引
   * @returns 格式化后的内容
   */
  formatter?: (row: any, prop: string, cellValue: any, index: number) => any
  /** 是否显示溢出提示 */
  showOverflowTooltip?: boolean
}

// 分页配置
export interface PaginationState {
  currentPage: number
  pageSize: number
  total: number
  pageSizes?: number[]
  layout?: string
}

// 表格状态
export interface TableState {
  data: any[]
  loading: boolean
  pagination: PaginationState
}

// 表格配置选项
export interface TableOptions {
  columns: TableColumn[]
  data?: any[]
  loading?: boolean
  pagination?: Partial<PaginationState>
  rowKey?: string
  border?: boolean
  stripe?: boolean
  showIndex?: boolean
}

// 表格事件
export interface TableEvents {
  'page-change': (page: number) => void
  'size-change': (size: number) => void
  'row-click': (row: any) => void
  'selection-change': (selection: any[]) => void
}
